<template>
	<view class="">
		<view class="column">
			<image src="/static/img/bg66.png" mode="" class="s-top-img"></image>
		</view>
		<view class="row t-con" style="flex-wrap: wrap;">
			<view class="item-con" v-for="(item, index) in list" :key="index">
				<image :src="item.icon" mode="" class="item-g"></image>
				<view class="item-info">
					<view class="clamp item-title">{{item.name}}</view>
					<view class="item-price">{{item.price}}</view>
				</view>
				<view class="item-cart animated" hover-class="bounceIn" @tap="addCart(item.id,'1','list')">
					<image src="/static/img/gouwuche.png" mode="" class="c-icon"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		list: Array
	}
};
</script>

<style scoped lang="scss">
.t-con {
	width: 711upx;
	margin: 0 auto;
	background: #ffffff;
	padding:20upx;
}
.s-top-img{
	width: 710upx;;
	height: 151upx;
	border-radius: 15upx 15upx 0 0;
}
.item-con {
	width: 211upx;
	position: relative;
	margin-bottom: 20upx;
	margin-right: 20upx;
	border-radius:10upx;
	position: relative;
}
.item-con:nth-child(3n) {
	margin-right: 0;
}
.item-title {
	font-size: 26upx;
	font-weight: bold;
	color: #333333;
	line-height: 44upx;
}
.item-price {
	font-size: 32upx;
	color: #FE2525;
	font-weight: bold;
	line-height: 44upx;
}
.item-price::before {
	content: '￥';
	font-size:20rpx;
	color: #FE2525;
}
.item-g {
	width: 100%;
	height: 187rpx;
	border-radius: 10rpx;
}
.c-icon{
	width: 62upx;
	height: 62upx;
}
.item-cart{
	position: absolute;
	right: 0;
	bottom: 0;
}
</style>
